<template>
  <div class="main app-containerA">
    <div class="openOrder">
      <!-- 顶部查询表单 -->
      <div class="openOrderTop">
        <el-form ref="searchForm" :model="queryParam" :inline="true" size="mini">
          <!-- <el-row> -->
          <!-- <el-col :span="5"> -->
          <el-form-item label="结算对象:" prop="customer">
            <el-input clearable placeholder="请输入结算对象" style="width: 170px" v-model="queryParam.customerInfo"></el-input>
            <!--            <el-select-->
            <!--              clearable-->
            <!--              filterable-->
            <!--              placeholder="请输入结算对象"-->
            <!--              style="width: 170px;"-->
            <!--              v-model="queryParam.customerInfo"-->
            <!--            >-->
            <!--              <el-option-->
            <!--                v-for="(item, index) in payCustomerDropdowm"-->
            <!--                :key="index"-->
            <!--                :label="item.name"-->
            <!--                :value="item.id"-->
            <!--              ></el-option>-->
            <!--            </el-select>-->
          </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="5"> -->
          <el-form-item label="结算单编号:">
            <el-input clearable placeholder="请输入结算单编号" size="mini" style="width: 170px" v-model="queryParam.billCode"></el-input>
          </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="8"> -->
          <el-form-item label="结算时间:">
            <el-date-picker clearable placeholder="请选择开始时间" style="width: 170px" type="datetime" v-model="queryParam.startTime"></el-date-picker>
            -
            <el-date-picker clearable placeholder="请选择结束时间" style="width: 170px" type="datetime" v-model="queryParam.endTime"></el-date-picker>
          </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="2"> -->
          <el-form-item label="委托书编号:">
            <el-input clearable size="mini" placeholder="请输入委托书编号" style="width: 170px" v-model="queryParam.contractNo"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="initMainTable" size="mini" type="primary">查询</el-button>
          </el-form-item>
          <!-- </el-col> -->
          <!-- </el-row> -->
        </el-form>
      </div>
      <div class="openTitle">客户结算单列表</div>
      <!-- 按钮组 -->
      <div class="btn">
        <buttonName :vif="buttonVif" @clickEvent="clickEvent"></buttonName>
        <!--        <el-button v-if="isAuth('view')" size="mini" plain type="primary" @click="viewBtn">查看</el-button>-->
        <!--        <el-button-->
        <!--          v-if="isAuth('add') && (actionName == 'way' || actionName == 'sea')"-->
        <!--          size="mini"-->
        <!--          plain-->
        <!--          type="primary"-->
        <!--          @click="addBtn"-->
        <!--        >新增-->
        <!--        </el-button>-->
        <!--        <el-button-->
        <!--          v-if="isAuth('edit') && (actionName == 'way' || actionName == 'sea')"-->
        <!--          size="mini"-->
        <!--          plain-->
        <!--          type="primary"-->
        <!--          @click="editBtn"-->
        <!--        >编辑-->
        <!--        </el-button>-->
        <!--        <el-button-->
        <!--          v-if="isAuth('del') && (actionName == 'way' || actionName == 'sea')"-->
        <!--          size="mini"-->
        <!--          plain-->
        <!--          type="primary"-->
        <!--          @click="delBtn"-->
        <!--        >删除-->
        <!--        </el-button>-->
        <!--        <el-button-->
        <!--          v-if="isAuth('initiateCollection') && (actionName == 'way' || actionName == 'sea')"-->
        <!--          size="mini"-->
        <!--          plain-->
        <!--          type="primary"-->
        <!--          @click="initiateCollection"-->
        <!--        >发起收款-->
        <!--        </el-button>-->
        <!--        <el-button-->
        <!--          v-if="isAuth('confirmPCollect') && (actionName == 'way' || actionName == 'sea')"-->
        <!--          size="mini"-->
        <!--          plain-->
        <!--          type="primary"-->
        <!--          @click="confirmPCollect"-->
        <!--        >收款确认-->
        <!--        </el-button>-->
        <!--        <el-button-->
        <!--          v-if="isAuth('confirmPayment') && actionName == 'info'"-->
        <!--          size="mini"-->
        <!--          plain-->
        <!--          type="primary"-->
        <!--          @click="confirmPayment"-->
        <!--        >向平台付款-->
        <!--        </el-button>-->
        <!--        <el-button-->
        <!--          v-if="isAuth('print')"-->
        <!--          size="mini"-->
        <!--          plain-->
        <!--          type="primary"-->
        <!--          @click="exportExcel"-->
        <!--        >导出结算单-->
        <!--        </el-button>-->
      </div>
      <!-- 主要表格 -->
      <split-pane split="horizontal" v-on:resize="resize" :min-percent="20" :default-percent="65">
        <template slot="paneL">
          <div class="openOrderBox" ref="tableH" style="height: 100%">
            <el-tabs v-model="actionName" type="card" @tab-click="tabsClick">
              <el-tab-pane label="陆运结算" name="way">
                <!-- 结算单列表 表格 -->
                <div class="openLeftTableBox">
                  <el-table
                    ref="wayTableRef"
                    :data="wayTable.data"
                    border
                    :header-cell-style="{ textAlign: 'center' }"
                    @row-click="tableRowClick"
                    :height="maxHeight"
                    @selection-change="selectionChange"
                    :row-style="rowStyleHandler"
                  >
                    <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                    <el-table-column align="center" type="selection"></el-table-column>
                    <el-table-column align="center" label="状态" prop="status" show-overflow-tooltip width="150">
                      <template slot-scope="scope">{{ cbStatus(scope) }}</template>
                    </el-table-column>
                    <el-table-column align="center" prop="type" label="费目" show-overflow-tooltip width="150"></el-table-column>
                    <el-table-column align="center" prop="name" label="结算单名称" show-overflow-tooltip width="120"></el-table-column>
                    <el-table-column align="center" prop="code" label="结算单号" show-overflow-tooltip width="250">
                      <template v-slot="scope">
                        <el-popover placement="right" width="500" v-model="annexFileTableShow[scope.$index]" trigger="manual" title="附件列表">
                          <el-table border :header-cell-style="{ textAlign: 'center' }" :data="reviewFileList" size="mini">
                            <el-table-column align="center" label="序号" type="index" width="55"></el-table-column>
                            <el-table-column align="center" label="名称" prop="aName"></el-table-column>
                            <el-table-column align="center" width="80">
                              <template v-slot="scope">
                                <el-button type="primary" size="mini" circle icon="el-icon-download" @click="downReviewAnnexFile(scope.row)"></el-button>
                              </template>
                            </el-table-column>
                          </el-table>
                          <u slot="reference" @click="showDetail(scope)">{{ scope.row.code }}</u>
                        </el-popover>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="acode" label="订单号" show-overflow-tooltip width="200"></el-table-column>
                    <el-table-column align="center" width="120px" prop="payName" label="结算对象" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="cmtNo" label="委托书编号" show-overflow-tooltip width="200"></el-table-column>
                    <el-table-column align="center" prop="loadingPlace" label="装货地点" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="unloadPlace" label="收货地点" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="weight" label="总重(吨)" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="price" label="单价(元/吨)" show-overflow-tooltip width="120"></el-table-column>
                    <el-table-column align="center" prop="totalPrice" label="金额(元)" show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip></el-table-column>
                  </el-table>
                </div>
                <!-- 分页 -->
                <div class="block">
                  <el-pagination
                    ref="pagination"
                    class="pagination"
                    small
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="Pagination.currentPage"
                    :page-sizes="Pagination.pageSizeList"
                    :page-size="Pagination.PageSize"
                    :layout="Pagination.layout"
                    :total="Pagination.total"
                  ></el-pagination>
                </div>
              </el-tab-pane>
              <el-tab-pane label="海运结算" name="sea">
                <el-table
                  :data="seaTable.data"
                  border
                  ref="seaTableRef"
                  :header-cell-style="{ textAlign: 'center' }"
                  highlight-current-row
                  @row-click="tableRowClick"
                  :height="maxHeight"
                  @selection-change="selectionChange"
                >
                  <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                  <el-table-column align="center" type="selection"></el-table-column>
                  <el-table-column align="center" label="状态" prop="status" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.status === '已付款' ? '对方已付款' : scope.row.status }}</template>
                  </el-table-column>
                  <el-table-column align="center" prop="type" label="费目" show-overflow-tooltip></el-table-column>
                  <el-table-column align="center" prop="name" label="结算单名称" show-overflow-tooltip width="120"></el-table-column>
                  <el-table-column align="center" prop="code" label="结算单号" show-overflow-tooltip width="250">
                    <template v-slot="scope">
                      <el-popover placement="right" width="500" v-model="annexFileTableShow[scope.$index]" trigger="manual" title="附件列表">
                        <el-table border :header-cell-style="{ textAlign: 'center' }" :data="reviewFileList" size="mini">
                          <el-table-column align="center" label="序号" type="index" width="55"></el-table-column>
                          <el-table-column align="center" label="名称" prop="aName"></el-table-column>
                          <el-table-column align="center" width="80">
                            <template v-slot="scope">
                              <el-button type="primary" size="mini" circle icon="el-icon-download" @click="downReviewAnnexFile(scope.row)"></el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                        <u slot="reference" @click="showDetail(scope)">{{ scope.row.code }}</u>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" prop="acode" label="订单号" show-overflow-tooltip width="200"></el-table-column>
                  <el-table-column align="center" width="120px" prop="payName" label="结算对象" show-overflow-tooltip></el-table-column>
                  <el-table-column align="center" prop="cmtNo" label="委托书编号" show-overflow-tooltip width="200"></el-table-column>
                  <el-table-column align="center" prop="loadingPlace" label="装货地点" show-overflow-tooltip></el-table-column>
                  <el-table-column align="center" prop="unloadPlace" label="收货地点" show-overflow-tooltip></el-table-column>
                  <el-table-column align="center" prop="weight" label="总重(吨)" show-overflow-tooltip></el-table-column>
                  <el-table-column align="center" prop="price" label="单价(元/吨)" show-overflow-tooltip width="120"></el-table-column>
                  <el-table-column align="center" prop="totalPrice" label="金额(元)" show-overflow-tooltip></el-table-column>
                  <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip></el-table-column>
                </el-table>
                <div class="block">
                  <el-pagination
                    class="pagination"
                    small
                    background
                    @size-change="infoHandleSizeChange"
                    @current-change="infoHandleCurrentChange"
                    :current-page="seaTable.pageInfo.index"
                    :page-sizes="Pagination.pageSizeList"
                    :page-size="seaTable.pageInfo.size"
                    :layout="Pagination.layout"
                    :total="seaTable.pageInfo.total"
                  ></el-pagination>
                </div>
              </el-tab-pane>
              <el-tab-pane label="信息费结算" name="info">
                <el-table
                  :data="infoTable.data"
                  ref="infoTableRef"
                  border
                  :header-cell-style="{ textAlign: 'center' }"
                  highlight-current-row
                  @row-click="tableRowClick"
                  :height="maxHeight"
                  @selection-change="selectionChange"
                >
                  <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                  <el-table-column align="center" type="selection"></el-table-column>
                  <el-table-column align="center" prop="status" label="状态" show-overflow-tooltip></el-table-column>
                  <el-table-column align="center" prop="type" label="费目" show-overflow-tooltip></el-table-column>
                  <el-table-column align="center" prop="name" label="结算单名称" show-overflow-tooltip width="120"></el-table-column>
                  <el-table-column align="center" prop="code" label="结算单号" show-overflow-tooltip width="250">
                    <template v-slot="scope">
                      <el-popover placement="right" width="500" v-model="annexFileTableShow[scope.$index]" trigger="manual" title="附件列表">
                        <el-table border :header-cell-style="{ textAlign: 'center' }" :data="reviewFileList" size="mini">
                          <el-table-column align="center" label="序号" type="index" width="55"></el-table-column>
                          <el-table-column align="center" label="名称" prop="aName"></el-table-column>
                          <el-table-column align="center" width="80">
                            <template v-slot="scope">
                              <el-button type="primary" size="mini" circle icon="el-icon-download" @click="downReviewAnnexFile(scope.row)"></el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                        <u slot="reference" @click="showDetail(scope)">{{ scope.row.code }}</u>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="120px" prop="payer" label="结算对象" show-overflow-tooltip></el-table-column>
                  <el-table-column align="center" prop="cmtNo" label="委托书编号" show-overflow-tooltip width="200"></el-table-column>
                  <!--          <el-table-column align="center" prop="loadingPlace" label="装货地点" show-overflow-tooltip></el-table-column>-->
                  <!--          <el-table-column align="center" prop="unloadPlace" label="收货地点" show-overflow-tooltip></el-table-column>-->
                  <el-table-column align="center" prop="weight" label="总重(吨)" show-overflow-tooltip></el-table-column>
                  <el-table-column align="center" prop="price" label="费率" show-overflow-tooltip></el-table-column>
                  <el-table-column align="center" label="金额(元)" prop="totalPrice" show-overflow-tooltip></el-table-column>
                  <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip></el-table-column>
                </el-table>
                <div class="block">
                  <el-pagination
                    class="pagination"
                    small
                    background
                    @size-change="infoTypeHandleSizeChange"
                    @current-change="infoTypeHandleCurrentChange"
                    :current-page="infoTable.pageInfo.index"
                    :page-sizes="Pagination.pageSizeList"
                    :page-size="infoTable.pageInfo.size"
                    :layout="Pagination.layout"
                    :total="infoTable.pageInfo.total"
                  ></el-pagination>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </template>

        <template slot="paneR">
          <div :height="itemHeight" ref="billItemRef" style="height: 100%">
            <el-table :data="billItemTable.data" border>
              <el-table-column width="55" show-overflow-tooltip align="center" type="index" label="序号"></el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="conNo" label="委托书编号" width="180"></el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="wcdSttime" label="装货日期" width="180"></el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="startPlace" label="装货地点" width="200"></el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="endPlace" label="收货地点" width="200"></el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="goodsName" label="货名"></el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="trkNo" label="车号"></el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="allWeight" label="吨数"></el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="ctrNo" label="箱号" v-if="actionName == 'sea'"></el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="sealNo" label="铅封号" v-if="actionName == 'sea'"></el-table-column>
              <el-table-column show-overflow-tooltip align="center" prop="transportQuantity" label="费用信息">
                <el-table-column show-overflow-tooltip align="center" prop="price" label="运输单价(元/吨)" width="150"></el-table-column>
                <el-table-column show-overflow-tooltip align="center" prop="allWeight" label="总重(吨)"></el-table-column>
                <el-table-column show-overflow-tooltip align="center" prop="allPrice" label="费用" width="150"></el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </split-pane>

      <infoDialog :info="infoDialogData" @dialogClose="dialogClose"></infoDialog>
      <viewDialog :info="viewDialogData" @dialogClose="dialogClose"></viewDialog>
    </div>
  </div>
</template>

<script>
import paginationMixin from '@/mixins/pagination'
import infoDialog from './infoDialog'
import resizeMixin from '@/mixins/resize'
import viewDialog from './viewDialog'
import store from '@/store'
import {
  confirmationResultsList,
  delChargeBill,
  exportStatement,
  getFileList,
  queryBillItem,
  queryChargeBill,
  queryCollCustomer,
  queryServiceBills,
} from '@/request/api'
import isAuth from '@/mixins/buttonAuth'
import buttonName from '@/components/buttonName/button-name'

export default {
  name: 'router.openOrderManage',
  mixins: [resizeMixin, paginationMixin, isAuth],
  data() {
    return {
      annexFileTableShow: [],
      buttonVif: {},
      currentData: {},
      actionName: 'way',
      maxHeight: -1,
      itemHeight: -1,
      payCustomerDropdowm: [], // 结算对象下拉
      billTypeDropdown: [],
      queryParam: {
        customerInfo: '', // 结算对象，
        billCode: '', // 结算单编号
        startTime: null,
        endTime: null,
        contractNo: '', // 委托书编号
      },
      // 运费
      wayTable: {
        data: [],
        selected: [],
        currentData: {},
      },
      // 海运
      seaTable: {
        data: [],
        selected: [],
        currentData: {},
        pageInfo: {
          index: 1,
          size: 30,
          total: 0,
        },
      },
      // 信息费
      infoTable: {
        data: [],
        selected: [],
        currentData: {},
        pageInfo: {
          index: 1,
          size: 30,
          total: 0,
        },
      },
      // 查看dialog
      viewDialogData: {
        title: '',
        show: false,
        currentData: {},
        list: [],
        btn: '',
        btnShow: true,
        tagName: '',
        reconciliation: false,
        source: 0,
        billItemTableShow: true,
        documentNoDisable: false,
      },
      // 增删改查dialog
      infoDialogData: {
        title: '',
        show: false,
        tagName: '',
        currentData: {},
      },
      billItemTable: {
        data: [],
      },
      reviewFileList: [],
    }
  },
  components: {
    infoDialog,
    viewDialog,
    buttonName,
  },
  computed: {
    cbStatus() {
      return function (scope) {
        if (scope.row.status === '已付款') {
          return '对方已付款'
        }
        if (scope.row.statusCode === '3') {
          return '对方已确认'
        }
        return scope.row.status
      }
    },
  },
  created() {
    this.buttonShow()
    this.resize = () => {
      this.maxHeight = this.$refs.tableH.offsetHeight - 100
      this.itemHeight = this.$refs.billItemRef.offsetHeight
    }
  },
  mounted() {
    this.initMainTable()
    this.initPayCustomerDropdowm()
  },
  methods: {
    rowStyleHandler({ row }) {
      if (this.wayTable.selected.includes(row)) {
        return {
          background: '#5786ee',
        }
      }
    },
    buttonShow() {
      const map = new Map()
      this.$store.getters['user/GET_NAV_BUTTON'].moduleChildrenGrand.forEach(m => {
        if (m.mdlCode === 'confirmPayment') {
          map.set(m.mdlCode, this.actionName === 'info')
        } else if (m.mdlCode === 'view' || m.mdlCode === 'print') {
          map.set(m.mdlCode, true)
        } else {
          map.set(m.mdlCode, this.actionName === 'way' || this.actionName === 'sea')
        }
      })
      this.buttonVif = map
    },
    // 初始化主表
    initMainTable() {
      let d = {
        contractNo: this.queryParam.contractNo,
      }
      let payB = store.state.user.FLT_UUID_DX_H
      if (this.actionName == 'way') {
        Object.assign(d, {
          cbJpayerName: this.queryParam.customerInfo,
          index: this.Pagination.currentPage,
          size: this.Pagination.pageSize,
          cbBillType: 'SHIP',
          cbBillNo: this.queryParam.billCode,
          startTime: this.queryParam.startTime,
          endTime: this.queryParam.endTime,
          cbType: this.actionName,
          contractNo: this.queryParam.contractNo,
          payB,
        })
      } else if (this.actionName == 'sea') {
        Object.assign(d, {
          cbJpayerName: this.queryParam.customerInfo,
          index: this.Pagination.currentPage,
          size: this.Pagination.pageSize,
          cbBillType: 'SHIP',
          cbType: this.actionName,
          cbBillNo: this.queryParam.billCode,
          startTime: this.queryParam.startTime,
          endTime: this.queryParam.endTime,
          payB,
        })
      } else if (this.actionName == 'info') {
        queryServiceBills(
          Object.assign(d, {
            index: this.Pagination.currentPage,
            size: this.Pagination.pageSize,
            payA: this.queryParam.customerInfo,
            payAName: this.queryParam.customerInfo,
            cbBillNo: this.queryParam.billCode,
            startTime: this.queryParam.startTime,
            endTime: this.queryParam.endTime,
            payB,
          })
        ).then(res => {
          this.infoTable.data = res.data
          this.infoTable.pageInfo.total = res.total
        })
        return
      }
      queryChargeBill(d).then(res => {
        this.wayTable.data = []
        this.currentData = {}
        if (this.actionName == 'way') {
          this.wayTable.data = res.data
          this.Pagination.total = res.total
        } else if (this.actionName == 'sea') {
          this.seaTable.data = res.data
          this.seaTable.pageInfo.total = res.total
        } else if (this.actionName == 'info') {
          this.infoTable.data = res.data
          this.infoTable.pageInfo.total = res.total
        }
        for (let i = 0; i < res.data.length; i++) {
          this.annexFileTableShow[i] = false
        }
      })
    },
    // 下拉框查询
    initPayCustomerDropdowm() {
      queryCollCustomer({}).then(res => {
        this.payCustomerDropdowm = res.data
      })
    },
    initBillItemTable() {
      queryBillItem({
        billId: this.currentData.id,
      }).then(res => {
        this.billItemTable.data = res.data
      })
    },
    // 查看
    viewBtn() {
      if (Object.keys(this.currentData).length === 0) {
        this.$message.error('请选择一项')
        return
      }
      this.viewDialogData.currentData = this.currentData
      this.viewDialogData.documentNoDisable = true
      this.viewDialogData.uploadFileShow = false
      this.viewDialogData.btnShow = false
      this.viewDialogData.title = '详细信息'
      this.viewDialogData.show = true
      this.viewDialogData.tagName = this.actionName
    },
    // 添加
    addBtn() {
      this.infoDialogData.title = '新增'
      this.infoDialogData.show = true
      this.infoDialogData.tagName = this.actionName
    },
    // 修改
    editBtn() {
      if (Object.keys(this.currentData).length == 0) {
        this.$message.error('请选择一项')
        return
      }
      if (this.wayTable.currentData.statusCode != 1) {
        this.$message.error('结算单已经在使用中，无法编辑')
        return
      }
      this.infoDialogData.currentData = this.currentData
      this.infoDialogData.title = '编辑'
      this.infoDialogData.show = true
    },
    // 删除
    delBtn() {
      if (Object.keys(this.currentData).length == 0) {
        this.$message.error('请选择一项')
        return
      }
      if (this.currentData.statusCode != 1) {
        this.$message.error('结算单已经在使用中，无法删除')
        return
      }
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          delChargeBill({
            cbId: this.wayTable.currentData.id,
          }).then(() => {
            this.$message.success('删除成功')
            this.currentData = {}
            this.initMainTable()
          })
        })
        .catch(() => {})
    },
    // 收款确认
    confirmPCollect() {
      const data = this.getCurrentSelect()
      if (!data.length) {
        this.$message.error({
          showClose: true,
          message: '至少选择一项',
        })
        return
      }
      for (let datum of data) {
        if (datum.statusCode.toString() === '5') {
          this.$message.error({
            message: '不要重复确认',
            showClose: true,
          })
          return
        }
        if (datum.statusCode.toString() !== '4') {
          this.$message.error({
            message: '对方未付款，无法收款确认',
            showClose: true,
          })
          return
        }
      }
      confirmationResultsList({
        ids: data.map(value => {
          return value.id
        }),
        status: '5',
      }).then(() => {
        this.$message.success({
          showClose: true,
          message: '收款确认成功',
        })
        this.initMainTable()
      })
    },
    // 付款确认
    confirmPayment() {
      const data = this.getCurrentSelect()
      if (!data.length) {
        this.$message.error({
          showClose: true,
          message: '至少选择一项',
        })
        return
      }
      for (let datum of data) {
        if (datum.statusCode.toString() === '4') {
          this.$message.error({
            message: '不要重复确认',
            showClose: true,
          })
          return
        }
        if (datum.statusCode.toString() !== '2') {
          this.$message.error({
            message: '对方未付款，无法收款确认',
            showClose: true,
          })
          return
        }
      }
      confirmationResultsList({
        ids: data.map(value => {
          return value.id
        }),
        status: '4',
      }).then(() => {
        this.$message.success({
          showClose: true,
          message: '付款确认成功',
        })
        this.initMainTable()
      })
    },
    // 表格单选
    tableRowClick(val) {
      this.currentData = val
      if (this.actionName !== 'info') {
        this.initBillItemTable()
      }
      this.$refs[`${this.actionName}TableRef`].toggleRowSelection(val)
    },
    // 导出结算单
    exportExcel() {
      const data = this.getCurrentSelect()
      if (!data.length) {
        this.$message.error({
          message: '至少选择一项',
          showClose: true,
        })
        return
      }
      for (let datum of data) {
        if (datum.payName !== data[0].payName) {
          this.$message.error({
            message: '请选择相同的结算对象',
            showClose: false,
          })
          return
        }
      }
      exportStatement({
        ids: data.map(value => {
          return value.id
        }),
        type: 0,
        yht: 'gys',
        section: this.actionName,
      }).then(res => {
        const fileName = decodeURI(res.headers['filename'])
        const reader = new FileReader()
        reader.readAsDataURL(new Blob([res.data]))
        reader.onload = e => {
          let a = document.createElement('a')
          a.download = fileName
          a.href = e.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
        window.parent._$store.dispatch('app/loading_status', false)
        this.initMainTable()
      })
    },
    // 发起收款
    initiateCollection() {
      const data = this.getCurrentSelect()
      if (!data.length) {
        this.$message.error('至少选择一条')
        return
      }
      for (let datum of data) {
        if (datum.payName !== data[0].payName) {
          this.$message.error({
            message: '请选择相同的结算对象',
            showClose: false,
          })
          return
        }
        if (datum.statusCode.toString() === '2') {
          this.$message.error({
            message: '不要重复确认',
            showClose: true,
          })
          return
        }
        if (datum.statusCode.toString() !== '3') {
          this.$message.error({
            message: '非确认状态',
            showClose: true,
          })
          return
        }
      }
      if (!Object.keys(this.currentData).length) {
        this.currentData = data[0]
      }
      this.viewDialogData.list = data
      this.viewDialogData.currentData = this.currentData
      this.viewDialogData.currentData.interimStatus = '2'
      this.viewDialogData.btnShow = true
      this.viewDialogData.btn = '确定'
      this.viewDialogData.title = '发起收款'
      this.viewDialogData.show = true
      this.viewDialogData.documentNoDisable = false
      this.viewDialogData.uploadFileShow = true
    },
    infoHandleSizeChange(val) {
      this.seaTable.pageInfo.size = val
      this.initMainTable()
    },
    infoHandleCurrentChange(val) {
      this.seaTable.pageInfo.index = val
      this.initMainTable()
    },
    tabsClick(val) {
      this.actionName = val.name
      this.viewDialogData.tagName = val.name
      this.infoDialogData.tagName = val.name
      this.currentData = {}
      this.billItemTable.data.length = 0
      this.buttonShow()
      this.initMainTable()
    },
    infoTypeHandleSizeChange(val) {
      this.infoTable.pageInfo.size = val
    },
    infoTypeHandleCurrentChange(val) {
      this.infoTable.pageInfo.size = val
    },
    dialogClose() {
      this.wayTable.currentData = {}
      this.seaTable.currentData = {}
      this.infoTable.currentData = {}
      this.infoDialogData.currentData = {}
      this.initMainTable()
      this.initPayCustomerDropdowm()
    },
    clickEvent(val) {
      if (val.mdlCode === 'view') {
        this.viewBtn()
      }
      if (val.mdlCode === 'add') {
        this.addBtn()
      }
      if (val.mdlCode === 'edit') {
        this.editBtn()
      }
      if (val.mdlCode === 'del') {
        this.delBtn()
      }
      if (val.mdlCode === 'initiateCollection') {
        this.initiateCollection()
      }
      if (val.mdlCode === 'confirmPCollect') {
        this.confirmPCollect()
      }
      if (val.mdlCode === 'confirmPayment') {
        this.confirmPayment()
      }
      if (val.mdlCode === 'print') {
        this.exportExcel()
      }
      if (val.mdlCode === 'push') {
        this.push()
      }
    },
    selectionChange(rows) {
      if (this.actionName === 'way') {
        this.wayTable.selected = rows
      }
      if (this.actionName === 'sea') {
        this.wayTable.selected = rows
      }
      if (this.actionName === 'info') {
        this.wayTable.selected = rows
      }
    },
    getCurrentSelect() {
      let data = []
      switch (this.actionName) {
        case 'way':
          data = this.wayTable.selected
          break
        case 'sea':
          data = this.wayTable.selected
          break
        case 'info':
          data = this.wayTable.selected
          break
      }
      return data
    },
    showDetail(scope) {
      const { row, $index } = scope
      if (row.statusCode === '3') {
        if (!this.annexFileTableShow[$index]) {
          getFileList({
            pubId: row.id,
            module: 'JSSH',
          }).then(res => {
            this.reviewFileList = res.data
            this.$nextTick(() => {
              this.annexFileTableShow[$index] = !this.annexFileTableShow[$index]
            })
          })
        } else {
          this.annexFileTableShow[$index] = !this.annexFileTableShow[$index]
        }
      } else {
        this.viewDialogData.currentData = row
        this.viewDialogData.documentNoDisable = true
        this.viewDialogData.uploadFileShow = false
        this.viewDialogData.btnShow = false
        this.viewDialogData.title = '详细信息'
        this.viewDialogData.show = true
        this.viewDialogData.tagName = this.actionName
      }
    },
    push() {
      if (!this.wayTable.selected.length) {
        this.$message.error('至少选择一项')
        return
      }
      for (let item of this.wayTable.selected) {
        if (item.statusCode === 'PUSH') {
          this.$message.error('不能重复推送')
          return
        }
        if (item.statusCode !== '1') {
          this.$message.error(`${item.code}不是未推送状态`)
          return
        }
      }
      confirmationResultsList({
        ids: this.wayTable.selected.map(value => {
          return value.id
        }),
        status: 'PUSH',
      }).then(() => {
        this.$message.success('推送成功')
        this.initMainTable()
      })
    },
    downReviewAnnexFile(file) {
      const a = document.createElement('a')
      a.download = file.aName
      if (process.env.NODE_ENV === 'development') {
        a.href = `/${window._$api.PROXYURL}${file.aPath}`
      } else {
        a.href = file.aPath
      }
      a.click()
      document.removeChild(a)
    },
  },
}
</script>

<style lang="scss" scoped>
.app-containerA {
  padding: 1rem 2rem;
  // overflow: auto;
  min-height: 100%;
  background-color: #fff;
}

.openOrder {
  height: 80%;
  width: 100%;
  padding-left: 10px;
  padding-top: 10px;
}

// .openOrderBox {
// height: calc(100vh - 300px);
// width: 100%;
// display: flex;
// .openOrderLeft {
//   flex: 1;
// }
// }

.openTitle {
  font-size: 13px;
}

.btn {
  padding-top: 10px;
  padding-bottom: 10px;
}

::v-deep .splitter-pane-resizer.horizontal {
  margin-top: -15px;
}
</style>
